<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <!-- React核心包 最先引入 提供一个对象React -->
  <script src="../00.依赖包/react.development.js"></script>
  <!-- React操作Dom包  提供了一个对象 ReactDOM-->
  <script src="../00.依赖包/react-dom.development.js"></script>
  <!-- 引入Babel包,用来解析JSX语法为js语法 -->
  <script src="../00.依赖包/babel.min.js"></script>
  <style>
  </style>
</head>

<body>
  <div id="app"></div>
  <!-- 如果需要babel对当前的script内部的jsx进行编译，则需要设置script标签的type属性-->
  <script type="text/babel">
    //使用jsx创建虚拟DOM 
    //- 虚拟DOM中要混入js表达式，要用{},{}中只能写变量或者表达式,不能书写语句(表达式有返回值,语句没有返回值)
    //jsx语法1
    // const color = 'red'
    // const hot = true
    // const vDOM = (
    // <div style ={{color}}>hello jsx
    //   <p>今天的天气真{hot?'热啊':'凉快'}</p>  
    // </div>
    // );

    //jsx语法2
    //指定的类名不要用class 要用className (避免元素的自带属性和js的关键字冲突)
    //在书写style行内样式时候，style接受的是一个对象格式的 列：style={{color:'red'}}
    // const vDOM = (
    //   <div style={{backgroundColor:'blue'}}>
    //     <p style={{fontSize:'80px'}}>JSX语法</p>
    //   </div>
    // );  

    //jsx语法3
    //- JSX中所有的元素都要闭合
    //- JSX语法外层必须有且只有一个外层父元素
    //- 标签的首字母
    //- 如果是小写,则认为是html提供的标签
    //- 如果是大写,则认为是一个组件
    //- jsx中注释:{/* <Hello/> ✳/}
      const vDOM =(
        <div>
            <p>JSX语法</p>
        </div>
      )
    //创建容器并渲染虚拟DOM
    ReactDOM.createRoot(document.getElementById('app')).render(vDOM)
  </script>
</body>

</html>